<template>
  <div id="product">
    <van-nav-bar
      title="商品"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img class="swipeImg" v-lazy="image.img_url" />
      </van-swipe-item>
    </van-swipe>

    <div class="info">
      <span>30天无忧退款</span>
      <span>48小时快速退款</span>
      <span>买88元免邮费</span>
    </div>

    <div class="proInfo">
      <h3 class="title">{{ info.name }}</h3>
      <p class="brief">{{ info.goods_brief }}</p>
      <p class="price">¥{{ info.retail_price }}</p>
    </div>

    <van-cell title="请选择规格数量" is-link />

    <!-- 商品参数 -->
    <div class="proParmas">
      <h3>商品参数</h3>
      <div class="proItem" v-for="(item, index) in attribute" :key="index">
        <span class="title">{{ item.name }}</span>
        <span class="value">{{ item.value }}</span>
      </div>
    </div>

    <!-- 商品详情 -->
    <div class="proDetail" v-html="info.goods_desc"></div>

    <van-goods-action>
      <van-goods-action-icon
        to="/buycart"
        :info="
          $store.state.cartTotal.goodsCount == 0
            ? ''
            : $store.state.cartTotal.goodsCount
        "
        icon="cart-o"
        text="购物车"
      />
      <van-goods-action-icon icon="star-o" text="已收藏" />
      <van-goods-action-button
        @click="chooseSku"
        type="warning"
        text="加入购物车"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>

    <!-- 选择商品规格 -->
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />
  </div>
</template>

<script>
import axios from "axios";
let sku = {
  // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
  // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
  tree: [
    {
      k: "颜色", // skuKeyName：规格类目名称
      v: [
        {
          id: "1", // skuValueId：规格值 id
          name: "红色", // skuValueName：规格值名称
        },
        {
          id: "1",
          name: "蓝色",
        },
      ],
      k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
      largeImageMode: false, //  是否展示大图模式
    },
  ],
  // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
  list: [
    {
      id: 2259, // skuId
      "s-1": "2", // 规格类目 k_s 为 s1 的对应规格值 id
      "s-2": "3", // 规格类目 k_s 为 s2 的对应规格值 id
      price: 100, // 价格（单位分）
      stock_num: 110, // 当前 sku 组合对应的库存
    },
    {
      id: 2259, // skuId
      "s-1": "1", // 规格类目 k_s 为 s1 的对应规格值 id
      "s-2": "4", // 规格类目 k_s 为 s2 的对应规格值 id
      price: 100, // 价格（单位分）
      stock_num: 130, // 当前 sku 组合对应的库存
    },
  ],
  price: "1.00", // 默认价格（单位元）
  stock_num: 227, // 商品总库存
  collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
  none_sku: false, // 是否无规格商品
  hide_stock: false, // 是否隐藏剩余库存
};
export default {
  props: ["id"],
  data() {
    return {
      data: {},
      info: {},
      attribute: [],
      show: false,
      sku: sku,
      goods: {
        // 数据结构见下方文档
        picture: "https://img01.yzcdn.cn/1.jpg",
      },
      messageConfig: {
        // 数据结构见下方文档
      },
    };
  },
  methods: {
    onClickLeft: function () {
      this.$router.go(-1);
    },
    onBuyClicked: function () {
      //将当前的内容提交到订单
    },
    onAddCartClicked: async function (skuData) {
      //选择商品规格，提交到购物车

      this.show = false;

      console.log(skuData);
      let chooseContent =
        skuData.selectedSkuComb["s-1"] + "_" + skuData.selectedSkuComb["s-2"];
      // console.log(chooseContent);
      let resultPro = this.data.productList.filter((item, index) => {
        if (item.goods_specification_ids == chooseContent) {
          return true;
        } else {
          return false;
        }
      });
      // console.log(resultPro);
      let cartRes = await axios.post(this.$root.api.CartAdd, {
        goodsId: resultPro[0].goods_id,
        number: skuData.selectedNum,
        productId: resultPro[0].id,
      });
      let data = cartRes.data.data;
      // console.log(cartRes.data);
      this.$store.commit("setCartList", data.cartList);
      this.$store.commit("setCartTotal", data.cartTotal);
    },
    chooseSku() {
      this.show = true;
    },
  },
  computed: {
    images: function () {
      if (this.data.gallery == undefined) {
        return [];
      } else {
        return this.data.gallery;
      }
    },
  },
  async created() {
    //获取数据

    this.$store.dispatch("AjaxCart");

    let res = await axios.get(this.$root.api.GoodsDetail, {
      params: { id: this.id },
    });
    console.log(res.data);
    this.data = res.data.data;
    this.info = this.data.info;
    this.attribute = this.data.attribute;
    this.goods.picture = this.info.primary_pic_url;
    this.sku.price = this.info.retail_price;
    this.sku.stock_num = this.info.goods_number;
    let tree = [];
    this.data.specificationList.forEach((item, index) => {
      let arr = [];
      item.valueList.forEach((product, i) => {
        arr.push({
          id: product.id, // skuValueId：规格值 id
          name: product.value, // skuValueName：规格值名称
        });
      });
      tree.push({
        k: item.name, // skuKeyName：规格类目名称
        v: arr,
        k_s: "s-" + item.specification_id, // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
        largeImageMode: false, //  是否展示大图模式
      });
    });
    this.sku.tree = tree;
  },
};
</script>

<style lang="less" >
* {
  margin: 0;
}
#product {
  .swipeImg {
    width: 100%;
  }
  .info {
    display: flex;
    justify-content: space-around;
    font-size: 12px;
    color: #999;
    height: 24px;
    line-height: 24px;
    background: #efefef;
    span {
      position: relative;
    }

    span::before {
      content: "";
      display: block;
      position: absolute;
      left: -10px;
      top: 8px;
      width: 4px;
      height: 4px;
      border-radius: 2px;
      border: 1px solid red;
    }
  }

  .proInfo {
    .title {
      font-weight: 500;
      padding: 10px 0 0 0;
    }
    .brief {
      font-size: 12px;
      color: #999;
      padding: 5px 0 0 0;
    }
    .price {
      color: red;
      font-size: 16px;
      padding: 10px 0 0 0;
    }
  }
  .van-cell__title {
    text-align: left;
  }

  .proParmas {
    padding-bottom: 20px;
    h3 {
      padding: 10px 0;
    }
    .proItem {
      width: 90%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between; //两边靠拢
      height: 24px;
      color: #999;
      font-size: 12px;
      background: #efefef;
      line-height: 24px;
      text-align: left;
      .title {
        width: 45px;
        padding: 0 10px;
        border-right: 1px solid #ccc;
      }
      .value {
        width: 260px;
        overflow: hidden;
        text-overflow: ellipsis;
        word-spacing: normal;
      }
    }
  }
  .proDetail {
    width: 100%;
    img {
      width: 100%;
    }
    p {
      display: flex;
    }
  }
}
</style>